<template>
  <div class="order">
    <navBar title="订单" />

    <!-- tab栏 -->
    <van-tabs v-model="active"  @click="changeTab">
      <van-tab title="待付款" name="0" />
      <van-tab title="待发货" name="1" />
      <van-tab title="待收货" name="2" />
      <van-tab title="待评论" name="3" />
      <van-tab title="已完成" name="4" />
    </van-tabs>

    <!-- 订单列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="shop" v-for="item in list" :key="item.id">
        <van-cell :title="item.createTime" :value="item?.statusDto?.type | state" />
        <van-card
          v-for="it in item?.cartInfo" :key="it.id"
          :num="it.cartNum"
          :price="it.truePrice"
          :desc="it.productInfo?.storeInfo"
          :title="it.productInfo?.storeName"
          :thumb="it.productInfo?.image"
        >
          <template #tags>
            <van-tag plain type="danger">{{ it.productInfo?.attrInfo?.sku }}</van-tag>
          </template>
        </van-card>
        <van-cell title="">
          <template>
            <template v-if="item?.statusDto?.type === '0'">
              <van-button size="mini" @click="orderCancel(item.orderId)">取消订单</van-button>
              <van-button size="mini" @click="orderPay(item.orderId)">去付款</van-button>
            </template>
            <template v-if="item?.statusDto?.type === '1'">
              <van-button size="mini">提醒发货</van-button>
              <van-button size="mini" @click="$router.push(`/orderDetail/${ item.unique }`)">立即查看</van-button>
            </template>
            <template v-if="item?.statusDto?.type === '2'">
              <van-button size="mini" @click="orderTake(item.orderId)">确认收货</van-button>
              <van-button size="mini" @click="$router.push(`/orderDetail/${ item.unique }`)">立即查看</van-button>
            </template>
            <template v-if="item?.statusDto?.type === '3'">
              <van-button size="mini" @click="$router.push(`/orderDetail/${ item.unique }`)">立即查看</van-button>
            </template>
            <template v-if="item?.statusDto?.type === '4'">
              <van-button size="mini" @click="$router.push(`/orderDetail/${ item.unique }`)">立即查看</van-button>
              <van-button size="mini" @click="delOrder(item.orderId)">删除订单</van-button>
            </template>
          </template>
        </van-cell>
      </div>
    </van-list>

    <!-- 空状态 -->
    <van-empty description="空空如也" v-if="!list.length" />

  </div>
</template>

<script>
import {
  orderList,
  orderCancel,
  orderPay,
  orderTake,
  delOrder,
} from '@/api/order'

export default {
  data() {
    return {
      active: 0,
      loading: false,
      finished: false,
      list: [], // 订单
      total: 0,
      page: {
        page: 1,
        limit: 10,
      }
    }
  },
  created() {
    const { query } = this.$route
    this.active = query.type || 0
    this.orderList()
  },
  methods: {
    // 获取订单列表
    async orderList() {
      const { data } = await orderList({
        ...this.page,
        type: this.active
      })
      // console.log(data);
      this.total = data.totalElements || 0
      this.list.push(...data.content)
      if(this.list?.length >= this.total) this.finished = true
    },

    // 取消订单
    async orderCancel(id) {
      if(!id) return
      if(! await this.message('取消订单')) return
      const res = await orderCancel({ id })
      if(res.status !== 200) return this.$toast.fail(res.msg)
      this.$toast.success(res.msg)
      this.changeTab()
    },

    // 订单支付
    async orderPay(id) {
      if(!id) return
      if(! await this.message('订单支付')) return
      const res = await orderPay({
        uni: id,
        from: "h5",
        paytype: "yue"
      })
      if(res.status !== 200) return this.$toast.fail(res.msg)
      this.$toast.success(res.msg)
      this.changeTab()
    },

    // 确认收货
    async orderTake(id) {
      if(!id) return
      if(! await this.message('确认收货')) return
      const res = await orderTake({ uni: id })
      if(res.status !== 200) return this.$toast.fail(res.msg)
      this.$toast.success(res.msg)
      this.changeTab()
    },

    // 删除订单
    async delOrder(id) {
      if(!id) return
      if(! await this.message('删除订单')) return
      const res = await delOrder({ uni: id })
      if(res.status !== 200) return this.$toast.fail(res.msg)
      this.$toast.success(res.msg)
      this.changeTab()
    },

    // 提示
    async message(text) {
      const res = await this.$dialog.confirm({
        title: '提示',
        message: `确认要${ text }吗？`,
      }).catch(() => {});
      return res ? true : false
    },

    // 上拉刷新
    onLoad() {
      this.page.page += 1
      this.orderList()
      this.loading = true
    },

    // 切换tab栏
    changeTab() {
      this.page = {
        page: 1,
        limit: 10,
      }
      this.list = [], this.finished = false
      this.orderList()
    },
  },
  filters: {
    // 订单状态
    state(val) {
      return val === '0' ? '待付款' : val === '1' ? '待发货' : val === '2' 
      ? '待收货' : val === '3' ? '待评论' : val === '4' ? '已完成' : ''
    }
  }
}
</script>
<style lang="scss" scoped>
.order {
  text-align: left;
  .shop {
    margin-top: 10px;
    .van-card {
      margin: 0;
      background-color: #fff;
    }
    .van-cell::after {
      border: 0;
    }
    
  }
}
</style>
<style scoped>
.van-card .van-card__price {
  color: #e47967;
}
.van-cell >>> .van-button {
  width: 80px;
}
</style>